<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { Toast } from 'vant'

const form = ref({
  productName: '',
  category: '',
  status: '',
  specification: '',
  supplier: '',
  location: '',
  remark: '',
  inQuantity: ''
})

const loading = ref(false)
const showToast = ref(false)
const toastMsg = ref('')

const onSubmit = async () => {
  loading.value = true
  try {
    // 替换为你的后端接口地址
    const res = await axios.post('/api/products/add', form.value)
    if (res.data.code === 200) {
      toastMsg.value = '录入成功'
      showToast.value = true
      // 清空表单
      Object.keys(form.value).forEach(k => form.value[k] = '')
    } else {
      toastMsg.value = res.data.message || '录入失败'
      showToast.value = true
    }
  } catch (e) {
    toastMsg.value = '网络错误'
    showToast.value = true
  }
  loading.value = false
}
</script>

<template>
  <div class="mobile-entry">
    <van-nav-bar title="扫码入库" />
    <van-form @submit="onSubmit" style="margin: 24px;">
      <van-field
        v-model="form.productName"
        name="productName"
        label="商品名称"
        placeholder="请输入商品名称"
        required
      />
      <van-field
        v-model="form.category"
        name="category"
        label="类别"
        placeholder="请输入类别"
        required
      />
      <van-field
        v-model="form.supplier"
        name="supplier"
        label="供应商"
        placeholder="请输入供应商"
        required
      />
      <van-field
        v-model="form.status"
        name="status"
        label="状态"
        placeholder="上架/下架"
        required
      />
      <van-field
        v-model="form.specification"
        name="specification"
        label="规格型号"
        placeholder="请输入规格型号"
        required
      />
      <van-field
        v-model="form.location"
        name="location"
        label="存放位置"
        placeholder="请输入存放位置"
        required
      />
      <van-field
        v-model="form.inQuantity"
        name="inQuantity"
        label="入库数量"
        type="number"
        placeholder="请输入数量"
        required
      />
      <van-field
        v-model="form.remark"
        name="remark"
        label="介绍"
        type="textarea"
        placeholder="请输入商品介绍"
        required
      />
      <div style="margin: 24px 0;">
        <van-button round block type="primary" native-type="submit" :loading="loading">
          提交
        </van-button>
      </div>
    </van-form>
    <van-toast v-model:show="showToast" :message="toastMsg" />
  </div>
</template>

<style scoped>
.mobile-entry {
  min-height: 100vh;
  background: #f7f8fa;
}
</style>